<template>
  <div>
    <!-- 在表格中显示用户信息 -->
    <el-table
      :data="infraredLogList"
      border
      :default-sort="{ prop: ['operationDate'], order: 'descending' }"
      stripe
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column
        label="设备ID"
        prop="deviceId"
      ></el-table-column>
      <el-table-column
        label="是否告警"
        prop="alarm"
      ></el-table-column>
      <el-table-column  
        label="操作时间"
        sortable
        prop="operationDate"
      ></el-table-column>
      <el-table-column
        label="远程IP"
        prop="remoteHost"
      ></el-table-column>
      <el-table-column
        label="URI"
        prop="uri"
      ></el-table-column>
      <el-table-column
        label="操作"
        width="180px"
      >
        <!-- 插槽 -->
        <template slot-scope="scope">
          <!-- 查看详情 -->
          <el-tooltip
            effect="dark"
            content="查看详情"
            placement="top"
            :enterable="false"
          >
            <el-button
              @click="showEditDialog(scope.row.id)"
              type="primary"
              icon="el-icon-edit"
              size="mini"
            ></el-button>
          </el-tooltip>
          <!-- 删除按钮 -->
          <el-button
            @click="removeDeviceById(scope.row.id)"
            type="danger"
            icon="el-icon-delete"
            size="mini"
          ></el-button>
          <!-- 分配角色按钮 -->
          <el-tooltip
            effect="dark"
            content="下线"
            placement="top"
            :enterable="false"
          >
            <el-button
              @click="setRole(scope.row)"
              type="warning"
              icon="el-icon-setting"
              size="mini"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页模块 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pageNum"
      :page-sizes="[10]"
      :page-size="queryInfo.limit"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
  </div>
</template>

<script>
const base_url = "http://localhost:8079";
const base_api = "log/infrared";
export default {
  created() {
    this.getInfraredList();
  },
  data() {
    return {
      // 获取用户列表的参数对象
      queryInfo: {
        query: "",
        // 当前的页数
        pageNum: 0,
        // 当前每页显示多少条数据
        limit: 10,
      },
      total: 0,
      infraredLogList: [],
    };
  },
  methods: {
    // 获取用户信息
    getInfraredList() {
      var pageNum = this.queryInfo.pageNum;
      var limit = this.queryInfo.limit;
      this.$axios
        .get(`${base_url}/${base_api}/getAll/${pageNum}/${limit}`, "")
        .then((res) => {
          if (res.data.code === 200) {
            console.log(res.data);
            this.total = res.data.data.total;
            this.infraredLogList = res.data.data.records;
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },

    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage;
      this.getInfraredList();
    },

    async removeDeviceById(id) {
      this.$axios
        .get(`${base_url}/${base_api}/deleteById/${id}`, "")
        .then((res) => {
          if (res.data.code === 200) {
            // 这里到时候加一个是否确认删除
            console.log("删除成功");
            this.getInfraredList();
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>

<style>
</style>
